<template>
  <div class="checkNww">
    <template ref="headerRef">
      <HeaderRefComponent @type-change="typeChange" />
    </template>

    <div ref="headerSearch">
      <Search @submit="submit" :list="statusList" />
    </div>

    <el-card class="box-card">
      <el-table :data="tableData">
        <el-table-column prop="courseName" max-width="400px" label="课程名称">
        </el-table-column>
        <el-table-column
          prop="courseIndexName"
          max-width="400px"
          label="课次名称"
        ></el-table-column>
        <!-- <el-table-column prop="" label="班型"></el-table-column> -->
        <el-table-column
          prop="username"
          max-width="100px"
          label="提交人"
        ></el-table-column>
        <el-table-column
          prop="submitTime"
          max-width="150px"
          label="备课时间"
        ></el-table-column>

        <el-table-column prop="" max-width="100px" label="审核状态">
          <template #default="scope">
            <p>
              {{
                statusList[
                  statusList.findIndex(
                    (item) => item.value == scope.row.checkStaus
                  )
                ]?.label
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template #default="scope">
            <el-button
              type="text"
              class="btnLeft"
              v-if="[2, 4, 5].includes(scope.row.checkStaus)"
              @click="btnLook(scope.row, 'ck', scope.$index)"
              >查看</el-button
            >
            <el-button
              type="text"
              class="btnLeft"
              v-if="[0, 1, 3].includes(scope.row.checkStaus)"
              @click="btnLook(scope.row, 'sh', scope.$index)"
              >审核</el-button
            >
            <el-popover placement="bottom" trigger="hover">
              <template #reference>
                <el-button type="text">⋮</el-button>
              </template>
              <p>
                <el-button type="text" @click="hisHandle(scope.row)"
                  >历史记录</el-button
                >
              </p>
              <p>
                <el-button
                  type="text"
                  @click="btnLook(scope.row, 'pf', scope.$index)"
                  v-show="![2, 5, 3, 1, 0].includes(scope.row.checkStaus)"
                  >去评分</el-button
                >
              </p>
              <p>
                <el-button
                  type="text"
                  @click="btnLook(scope.row, 'dp', scope.$index)"
                  v-show="
                    [5].includes(scope.row.checkStaus) &&
                    !scope.row.refuseReason
                  "
                  >去点评</el-button
                >
              </p>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <Details ref="refDetails"></Details>
    <div>
      <!-- {{ `共${Math.ceil(Number(page.total) / Number(page.size))}页 / ${page.total}条数据` }} -->
      <el-pagination
        background
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :total="page.total"
        @current-change="request"
        layout="total, prev, pager, next"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  ref,
  toRefs,
  reactive,
  defineComponent,
  onMounted,
  Ref,
  watch,
  onBeforeUpdate,
} from "vue";
import Details from "./components/details.vue";
import Examine from "./components/examine.vue";
import Screen from "@/utils/screen";
import { emitter } from "$";
import axios from "axios";
import { AxResponse } from "@/core/axios";
import HeaderRefComponent from "./components/header-ref.vue";
import Search from "./components/search.vue";
import Moment from "moment";

export default defineComponent({
  components: {
    Search,
    Details,
    Examine,
    HeaderRefComponent,
  },
  setup() {
    // let statusList = [ { value: 0, label: "未审核" },  { value: 1, label: '待审核' }, { value: 2, label: '已评分' }, { value: 3, label: '审核中' }, { value: 4, label: '通过' }, { value: 5, label: '不通过' } ]
    let statusList = [
      { value: 0, label: "待审核" },
      { value: 1, label: "待审核" },
      { value: 2, label: "通过" },
      { value: 3, label: "待审核" },
      { value: 4, label: "通过" },
      { value: 5, label: "不通过" },
    ];

    let subjectId: Ref<any> = ref();

    emitter.emit("effect", (id) => (subjectId.value = id));

    let refDetails = ref();
    let operatType = ref(2);
    const data = reactive({
      operatType,
      subjectId,
      isShow: true,
      page: reactive({
        current: 1,
        size: 10,
        total: 0,
      }),
      statusList,
      tableData: reactive([]),
    });

    const submit = async (params: any, reset?: any) => {
      localStorage.setItem("_params", JSON.stringify(params));
      if (reset) {
        data.page.size = 10;
        data.page.current = 1;
      }
      params.size = data.page.size;
      params.current = data.page.current;
      params.subjectCode = data.subjectId;

      let result:any = await axios.post<any, AxResponse>(
        "/admin/prepareLesson/queryPage",
        params,
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
      );
      data.tableData = result.records.map((item) => {
        item.submitTime = Moment(item.submitTime).format("YYYY-MM-DD HH:mm");
        return item;
      });
      data.page.total = result.total;
    };

    let headerRef = ref();
    let hisHandle = (row: any) => refDetails.value.open(row);

    const typeChange = (e: any) => (data.operatType = e);
    watch(subjectId, () => submit({}));
    onMounted(() => {
      emitter.emit("slot", headerRef);
      submit({});
    });

    let request = (val: number) => {
      try {
        let _params = JSON.parse(localStorage.getItem("_params")!);
        data.page.current = val;
        submit(_params);
      } catch (error) {  }
    };
    let btnLook = async (row: any, tip: string, _index: any) => {
      localStorage.setItem("_index", _index);
      let result = await axios.post<any, AxResponse>(
        "/admin/prepareLesson/queryPrepareMaterials",
        { courseIndexId: row.courseIndex, teacherId: row.creatorId },
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
      );
      // let result = await axios.post <any, AxResponse> ('/admin/prepareLesson/queryMaterialByCourseIndexId', { courseIndexId: row.courseIndex, type: ''}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
      let checkObj = result.json;
      let score = await axios.post<any, AxResponse>(
        "/admin/prepareLesson/queryCheckResult",
        { prepareLessonId: row.id },
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
      );
      row.score = score.json;
      row.tip = tip;
      if (!score.json) return;

      Screen.create(
        Examine,
        { checkObj, row, data, _index },
        { zIndex: '5000', hiddenBack: false }
      ).finally(() => {
        try {
          let _params = JSON.parse(localStorage.getItem("_params")!);
          submit(_params);
        } catch (error) { }
      });
    };
    return {
      ...toRefs(data),
      headerRef,
      close,
      typeChange,
      hisHandle,
      submit,
      request,
      btnLook,
      refDetails,
    };
  },
});
</script>
<style scoped lang="scss">
.checkNww {
  .btnLeft {
    margin-right: 20px;
  }
}
</style>
